---
title: Divider
description: Visual separator for content with support for orientation, variants, thickness, colors and decorations.
component: Divider
---

<LiveComponent language="tsx">
{`
  import { Divider } from "@pipecat-ai/voice-ui-kit";

  <Divider />
`}
</LiveComponent>

<TypeTable
  className="text-sm"
  type={{
    orientation: {
      description: "The orientation of the divider",
      type: '"horizontal" | "vertical"',
      required: false,
      default: '"horizontal"',
    },
    variant: {
      description: "The visual style of the divider",
      type: '"solid" | "dotted" | "dashed"',
      required: false,
      default: '"solid"',
    },
    color: {
      description: "The color of the divider",
      type: '"primary" | "secondary" | "destructive" | "active" | "inactive" | "warning"',
      required: false,
      default: '"secondary"',
    },
    thickness: {
      description: "The thickness of the divider",
      type: '"thin" | "medium" | "thick"',
      required: false,
      default: '"thin"',
    },
    size: {
      description: "Convenience margin size",
      type: '"none" | "sm" | "md" | "lg" | "xl"',
      required: false,
      default: '"none"',
    },
    decoration: {
      description: "Optional decorative adornments",
      type: '"none" | "plus"',
      required: false,
      default: '"none"',
    },
    childrenClassName: {
      description: "Classes applied to the divider label when using children",
      type: "string",
      required: false,
      default: "undefined",
    },
    className: {
      description: "Additional CSS classes to apply",
      type: "string",
      required: false,
      default: "undefined",
    },
  }}
/>

---

## Usage

### Variants

<LiveComponent language="tsx">
{`
  import { Divider } from "@pipecat-ai/voice-ui-kit";

  <div className="flex flex-col gap-6 w-full">
    <Divider color="primary" />
    <Divider variant="dotted" color="primary" />
    <Divider variant="dashed" color="primary" />
  </div>
`}
</LiveComponent>

### Decoration

<LiveComponent language="tsx">
{`
  import { Divider } from "@pipecat-ai/voice-ui-kit";

  <div className="flex flex-col gap-6 w-full">
    <Divider decoration="plus" />
    <Divider decoration="plus">Section</Divider>
  </div>
`}
</LiveComponent>

### With Label

<LiveComponent language="tsx">
{`
  import { Divider } from "@pipecat-ai/voice-ui-kit";

  <div className="flex flex-col gap-6 w-full">
    <Divider>Hello</Divider>
    <Divider color="active">Active</Divider>
    <Divider variant="dashed" color="destructive">Danger</Divider>
  </div>
`}
</LiveComponent>

### Orientation

<LiveComponent language="tsx">
{`
  import { Divider, Card, CardContent } from "@pipecat-ai/voice-ui-kit";

  <div className="flex flex-row gap-6 items-stretch h-24">
    <Card className="flex-1">
      <CardContent className="h-full">
        <Divider orientation="vertical" color="primary" />
      </CardContent>
    </Card>
     <Card className="flex-1">
      <CardContent className="h-full">
        <Divider orientation="vertical" color="primary" decoration="plus" />
      </CardContent>
    </Card>
  </div>
`}
</LiveComponent>

### Colors

<LiveComponent language="tsx">
{`
  import { Divider } from "@pipecat-ai/voice-ui-kit";

  <div className="flex flex-col gap-4 w-full">
    <Divider color="secondary" />
    <Divider color="primary" />
    <Divider color="destructive" />
    <Divider color="warning" />
    <Divider color="active" />
    <Divider color="inactive" />
  </div>
`}
</LiveComponent>

### Thickness

<LiveComponent language="tsx">
{`
  import { Divider } from "@pipecat-ai/voice-ui-kit";

  <div className="flex flex-col gap-4 w-full">
    <Divider thickness="thin" />
    <Divider thickness="medium" />
    <Divider thickness="thick" />
  </div>
`}
</LiveComponent>

### Sizes (margins)

<LiveComponent language="tsx">
{`
  import { Divider } from "@pipecat-ai/voice-ui-kit";

  <div className="flex flex-col gap-4 w-full">
    <Divider size="sm" color="primary" />
    <Divider size="md" color="primary" />
    <Divider size="lg" color="primary" />
    <Divider size="xl" color="primary" />
  </div>
`}
</LiveComponent>
